<template>
	<view>
		<!-- 轮播图  -->
		<view><image :src="imgServer + product.goods_img" mode="widthFix" style="width: 100%;"></image></view>
		<!-- 商品标题 分享按钮 -->
		<view class="gui-padding gui-margin-top gui-flex gui-rows gui-space-between gui-align-items-center">
			<text class="gui-h5 gui-block-text product-name gui-block-text">{{ product.goods_name }}</text>
			<!-- #ifdef APP -->
			<!-- <view class="gui-icons gui-color-orange" @tap="share">&#xe622;</view> -->
			<!-- #endif -->
		</view>
		<view class="gui-common-line gui-margin-top"></view>
		<view class="gui-padding" style="margin-top:10rpx;">
			<view class="gui-flex gui-align-items-end">
				<text class="product-price">{{ product.money }}</text>
				<text v-if='product.markte_price > 0' class="gui-text gui-color-gray" style="margin-left:30rpx;text-decoration:line-through;">￥{{product.markte_price}}</text>
			</view>
			
			<view class="gui-flex gui-rows gui-nowrap gui-align-items-center" style="margin-bottom: 15rpx;">
				<text class="gui-text gui-color-gray">剩余库存：{{ product.kucun_num }}</text>
				<!-- <text v-if="product.lei==1" class="gui-text gui-color-gray" style="margin-left:30rpx;">需要{{product.shop_price*0.6}}ALG和{{product.shop_price*0.4}}AL</text> -->
			</view>
			<view class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-space-between">
				<text class="gui-text-small gui-color-gray">运费 ￥{{ product.postage ? product.postage : 0 }}</text>
				<text class="gui-text-small gui-color-gray">已售 {{ product.sales_num }} 件</text>
				<text class="gui-text-small gui-color-gray">浏览 {{ product.liu_num }}次</text>
			</view>
		</view>
		<view class="gui-common-line gui-margin-top"></view>
		<!-- 切换导航 -->
		<view class="gui-padding gui-margin-top" style="text-align: center;">
			<text style="color: #e56b00;border-bottom: 2px solid #e56b00;display: inline-block;padding-bottom: 10rpx;">商品详情</text>
		</view>
		<view class="gui-padding gui-margin-top"><rich-text :nodes="product.goods_desc"></rich-text></view>
		
		<view class="gui-padding gui-flex gui-rows gui-nowrap gui-align-items-center" style="margin: 30rpx 0;">
			<view class="gui-title-line"></view>
			<text class="gui-h3 gui-font gui-bold gui-color-purple" style="padding-left:50rpx; padding-right:50rpx;">更多推荐</text>
			<view class="gui-title-line"></view>
		</view>
		<view class="gui-margin-top">
			<gui-product-list1  :products="tui"  lujing='/pages/index/shop_detail'></gui-product-list1>
		</view>
		<!-- 底部 -->
		<view class="product-footer gui-bg-white gui-border-t">
			<!-- 属性选择 -->
			<scroll-view class="product-attr" :scroll-y="true" v-if="attrShow">
				<view class="gui-flex gui-rows gui-space-between">
					<text class="gui-text gui-color-gray">{{ attrtitle }}</text>
					<text class="gui-color-gray gui-h5 gui-icons" @tap="closeAttr">&#xe632;</text>
				</view>
				<view class="gui-margin-top"><gui-stags checkedBg="gui-bg-orange" @change="change" :tags="attr" type="radio"></gui-stags></view>
				<view class="gui-flex gui-rows gui-space-between"><text class="gui-text gui-color-gray">购买数量</text></view>
				<view class="gui-margin-top"><gui-step-box :value="1" @change="numberChange"></gui-step-box></view>
				<view style="width: 100%;height: 10rpx;"></view>
			</scroll-view>
			<view class="gui-flex gui-rows gui-space-between gui-align-items-center gui-border-t" style="height: 120rpx;" v-if="attrShow">
				<!-- 2个大按钮 -->
				<view class="gui-flex1 gui-footer-large-buttons gui-flex gui-rows gui-nowrap gui-justify-content-center">
					<view class="gui-footer-large-button gui-text-center gui-bg-buy" @tap="buynow1" style="border-radius:50rpx;width: 600rpx;" hover-class="gui-tap">
						<text class="gui-text gui-color-white gui-footer-large-button-text gui-block-text gui-text-center">立即购买</text>
					</view>
				</view>
			</view>
			<!-- 底部按钮栏 -->
			<view class="gui-flex gui-rows gui-space-between gui-align-items-center gui-border-t" v-if="!attrShow">
				<!-- 2个底部按钮 -->
				<view class="gui-footer-icon-buttons" style="margin-left:30rpx;" hover-class="gui-tap" @tap="goHome">
					<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons gui-primary-color">&#xe63b;</text>
					<text class="gui-footer-icon-buttons-text gui-block-text gui-icons gui-primary-color">首页</text>
				</view>
				<view class="gui-footer-icon-buttons" hover-class="gui-tap" @tap="kf">
					<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons gui-primary-color">&#xe626;</text>
					<text class="gui-footer-icon-buttons-text gui-block-text gui-icons gui-primary-color">联系我</text>
				</view>
				<!-- 2个大按钮 -->
				<view class="gui-flex1 gui-footer-large-buttons gui-flex gui-rows gui-nowrap gui-justify-content-end">
					<view class="gui-footer-large-button gui-text-center gui-bg-buy" @tap="buynow" style="border-radius:50rpx;width: 500rpx;" hover-class="gui-tap">
						<text class="gui-text gui-color-white gui-footer-large-button-text gui-block-text gui-text-center">立即购买</text>
					</view>
				</view>
			</view>
			<gui-iphone-bottom></gui-iphone-bottom>
		</view>
		<gui-area-picker ref="graceAddressPicker1" cancelText="关闭"></gui-area-picker>
		<view style="height:120rpx;"></view>
	</view>
</template>
<script>
let common = require('@/common.js');
export default {
	data() {
		return {
			product: {},
			number: 1,
			attrShow: false,
			id: 0,
			imgServer: '',
			attr: [],
			attrtitle: '',
			tui:[]
		};
	},
	onShareAppMessage(res) {
	    if (res.from === 'button') {// 来自页面内分享按钮
	      console.log(res.target)
	    }
		const user_no = uni.getStorageSync('user_no');
	    return {
	      title: '商城欢迎您！',
	      path: '/pages/index/shop_detail?id='+this.id+'&yaoqing='+user_no
	    }
	},
	onLoad(e) {
		if (e.yaoqing) {
			uni.setStorageSync('yaoqing', e.yaoqing);
		}
		this.imgServer = common.obs;
		this.id = e.id;
		uni.common.post(
			uni.common.apiServer + 'index',
			{
				type: 'get_index_goods_show',
				id: this.id
			},
			false,
			res => {
				if (res.code == 1) {
					let shu = res.data.goods_desc;
					shu = shu.replace(/src="\/ueditor\//g, 'style="width: 100%;height:auto !important;" src="' + common.nServer + 'ueditor/');
					shu = shu.replace(/<img/g, '<img style="width: 100%;height:auto !important;" ');
					res.data.goods_desc = shu;
					//console.log(res.data);
					this.product = res.data;
					this.attrtitle = res.data.attrtitle;
					let at = [];
					for (let i in res.data.attr) {
						if (i != 0) {
							at.push({
								text: res.data.attr[i],
								checked: false
							});
						} else {
							at.push({
								text: res.data.attr[i],
								checked: true
							});
						}
					}
					this.attr = at;
					
					//获取推荐
					let list=[]
					for (let v of res.tui) {
						list.push({
							'id':v.id,
							'name':v.goods_name,
							'img':common.obs+v.goods_img,
							'priceMarket':v.sales_num,
							'price':v.money,
							'lei':v.lei
						})
					}
					this.tui=list
					
				} else {
					uni.showToast({
						icon: 'none',
						title: '获取失败'
					});
				}
			},
			e => {
				console.log(e);
			}
		);
	},
	methods: {
		change: function(data) {
			for (let i in this.attr) {
				if (this.attr[i].text == data.text) {
					this.attr[i].checked = true;
				} else {
					this.attr[i].checked = false;
				}
			}
		},
		open1: function() {
			this.$refs.graceAddressPicker1.open();
		},
		goHome: function() {
			uni.switchTab({ url: '../index/index' });
		},
		kf: function() {
			uni.navigateTo({
				url:'../my/set'
			})

			// #ifdef APP-PLUS
			// let sweixin = null;
			// plus.share.getServices(
			// 	res => {
			// 		sweixin = res.find(i => i.id === 'weixin');
			// 		if (sweixin) {
			// 			sweixin.openCustomerServiceChat(
			// 				{
			// 					corpid: 'ww71800fe9777c8bb8',
			// 					url: 'https://work.weixin.qq.com/kfid/kfc7a6784a25783cfe6'
			// 				},
			// 				suc => {
			// 					console.log('success', JSON.stringify(res));
			// 				},
			// 				err => {
			// 					console.log('error', JSON.stringify(err));
			// 				}
			// 			);
			// 		} else {
			// 			plus.nativeUI.alert('当前环境不支持微信操作!');
			// 		}
			// 	},
			// 	function() {
			// 		uni.showToast({ title: '获取服务失败，不支持该操作。' + JSON.stringify(e), icon: 'error' });
			// 	}
			// );
			// #endif
		},
		buynow: function() {
			this.selectAttr();
		},
		buynow1: function() {
			// let h= new Date().getHours();
			// let i= new Date().getMinutes();
			// if(h>=23 || (h>=22  && i>30)){
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '系统维护时间不能购买'
			// 	});
			// 	return false
			// }
			if (this.number > this.product.kucun_num) {
				uni.showToast({
					icon: 'none',
					title: '库存不足不能购买！'
				});
				return false;
			}

			let attr;
			if (this.attrtitle && this.attr) {
				for (let s of this.attr) {
					if (s.checked) {
						attr = this.attrtitle + ': ' + s.text;
					}
				}
			} else {
				attr = '';
			}

			uni.common.post(
				uni.common.apiServer + 'my',
				{
					type: 'get_my_info'
				},
				false,
				res => {
					if (res.code == 1) {
						//先授权，后购买
						if(!res.data.openid_wx){
							uni.showLoading({
								title:'获取用户信息中...'
							})
							//获取openid
							let that = this;
							uni.getUserProfile({
								desc: '完善信息',
								success: function(infoRes) {
									// console.log(infoRes);
									uni.login({
										provider: 'weixin',
										success: function(loginRes) {
											uni.common.post(
												uni.common.apiServer + 'index',
												{
													type: 'get_wx_openid',
													rawData: infoRes.rawData,
													code: loginRes.code,
												},
												true,
												res1 => {
													if (res1.code == 1) {
														uni.showToast({
															title: '获取资料成功',
															icon: 'none'
														});	
														this.buy2(res,attr)
													} else {
														uni.showToast({
															title: '获取失败',
															icon: 'none'
														});
													}
													uni.hideLoading()
												},
												e => {
													uni.hideLoading()
													console.log(e);
												}
											);
										},
										fail() {
											uni.hideLoading()
											uni.showToast({
												icon: 'none',
												title: '获取失败'
											});
										}
									});
								},
								fail() {
									uni.hideLoading()
									uni.showToast({
										icon: 'none',
										title: '获取失败'
									});
								}
							});
							return false
						}
						
						this.buy2(res,attr)
						
					} else {
						uni.showToast({
							icon: 'none',
							title: '尚未登陆，请登陆后购买'
						});
					}
				},
				e => {
					console.log(e);
				}
			);
		},
		buy2(res,attr){
			if ((this.product.lei==1 && res.data.sheng_html) || (this.product.lei==4 && res.data.tuan_address && res.data.sheng_html)) {
				uni.navigateTo({
					url: 'payorder?num=' + this.number + '&id=' + this.id + '&attr=' + attr
				});
			} else {
				if(!res.data.sheng_html){
					uni.showModal({
						title: '提示',
						content: '请完善信息后购买！',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '../my/info'
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
				if(this.product.lei==4){
					uni.showModal({
						title: '提示',
						content: '是否立刻选择团购地址后购买？',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '../my/tuangou'
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			}
		},
		selectAttr: function() {
			// 未选择属性弹出选择
			if (!this.attrShow) {
				this.attrShow = true;
				return;
			}
		},
		numberChange: function(e) {
			this.number = e[0];
		},
		closeAttr: function() {
			this.attrShow = false;
		}
	}
};
</script>
<style scoped>
.product-name {
	width: 560rpx;
	line-height: 50rpx;
}
.product-share {
	width: 80rpx;
	height: 80rpx;
	text-align: center;
	font-size: 50rpx;
	color: #ff7900;
	line-height: 80rpx;
}
.product-price {
	color: #ff7900;
	line-height: 1.8;
	font-size: 40rpx;
	font-weight: bold;
}
.gui-common-line {
	height: 18rpx;
}
.product-footer {
	position: fixed;
	z-index: 99;
	left: 0;
	bottom: 0;
	width: 750rpx;
}
.product-attr {
	width: 700rpx;
	margin: 25rpx;
	height: 300rpx;
}
.gui-footer-large-button {
	width: 300rpx;
}
.button {
	background-color: #ffffff;
	outline: none;
	border: none;
}
.button::after {
	border: none;
}
.mo {
	margin-right: 25rpx;
}
</style>
